<template>
    <div class="home" style="padding: 20px">
        <!--    搜索-->
        <div style="margin: 10px 0">
            <el-input v-model="search" placeholder="请输入用户名" style="width: 30%" />
        </div>

        <el-table :data="tableData.filter(
        (data) =>
          !search || data.username.toLowerCase().includes(search.toLowerCase())
      )" border stripe style="width: 70vw">
            <el-table-column prop="id" label="ID" sortable />
            <el-table-column prop="orderNo" label="订单号"  />
            <el-table-column prop="username" sortable label="用户名" />
            <el-table-column prop="name" sortable label="商品名"  />
            <el-table-column prop="totalPrice"  label="价格" />
            <el-table-column prop="payTime" label="支付时间" />
        </el-table>

        <div style="margin: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    v-model:currentPage="currentPage"
                    :page-sizes="[5, 10, 15]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </div>
    </div>

</template>

<script>
    // @ is an alias to /src

    import { ArrowDown,DocumentAdd,setting } from '@element-plus/icons'
    import { ElMessage } from 'element-plus'
    import request from "../utils/request";
    import router from "../router";

    export default {
        name: 'Datalist',
        components: {
            ArrowDown,DocumentAdd,setting
        },
        data(){
            return{
                form:{},
                search:'',
                currentPage:1,
                total:0,
                pageSize:10,
                dialogVisible:false,
                tableData:[]
            }
        },
        created() {
            // let userStr = sessionStorage.getItem("user") || "{}"
            // this.user = JSON.parse(userStr)
            // // 请求服务端，确认当前登录用户的 合法信息
            // request.get("/user/" + this.user.id).then(res => {
            //     if (res.code === '0') {
            //         this.user = res.data
            //     }
            // })
            let userJson = sessionStorage.getItem("user")|| "{}"
            this.user = JSON.parse(userJson)
            if(this.user.role!==1) {
                router.push("/customMenu")
            }
            this.load()
        },
        methods:
            {
                load() {
                    request.get("/orderlist", {
                        params: {
                            pageNum: this.currentPage,
                            pageSize: this.pageSize,
                            search: this.search
                        }
                    }).then(res => {
                        console.log(res)
                        this.tableData = res.data.records
                        this.total = res.data.total
                    })
                },
                handleEdit(row){
                    this.form = JSON.parse(JSON.stringify(row))
                    this.dialogVisible = true
                    this.$nextTick(() => {
                        if (this.$refs['upload']) {
                            this.$refs['upload'].clearFiles()  // 清除历史文件列表
                        }
                    })
                },
                handleSizeChange(pageSize){
                    this.pageSize = pageSize
                    this.load()
                },

                handleCurrentChange(pageNum){
                    this.pageNum = pageNum
                    this.load()
                },
            }

    }
</script>
